<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层次选择器</title>
    <style type="text/css">
        .testColor {
            background: green;
        }

        .gray {
            background: gray;
        }
    </style>
</head>
<!--
    层次选择器：
        后代选择器：
            格式： 父元素 指定元素 （空格隔开）
            示例： $("父元素 指定元素")
            选择父元素的所有指定元素（包含第一代，第二代等）
        子代选择器
            格式：父元素 > 指定元素 （大于号隔开）
            示例：$("父元素 > 指定元素")
            选择父元素的所有第一代指定元素
        相邻选择器
            格式：元素 + 指定元素 （加号隔开）
            示例：$("元素 + 指定元素")
            选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
        同辈选择器
            格式：元素 ~ 指定元素 （波浪号隔开）
            示例：$("元素 ~ 指定元素")
            选择元素的下面的所有指定元素
-->

<body>
    <div id="parent">层次选择器
        <div id="child" class="testColor">父选择器
            <div class="gray">子选择器</div>
            <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">
            <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">
        </div>
        <div>
            选择器2<div>选择器2中的div</div>
        </div>
    </div>
</body>
<script src="js/jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 后代选择器
    var hd = $("#parent div");
    console.log(hd);
    // 子代选择器
    var zd = $("#parent > div");
    console.log(zd);
    // 相邻选择器
    var xl = $("#child + div");
    console.log(xl);
    // 同辈选择器
    var tb = $(".gray ~ img");
    console.log(tb)
</script>

</html>